"use strict";
import * as React from 'react';
import { commonStyles } from "../assets/styles/common";
import MyText from "./MyText";
import { SCREEN_WIDTH } from "../constant";
const { View, Keyboard, TextInput, StyleSheet, TouchableOpacity, Animated } = require('react-native');
const { connect } = require('react-redux');
class MyInputToolBar extends React.Component {
    constructor(props, context) {
        super(props, context);
        this._keyboardWillShow = (props) => {
            const { height } = props.endCoordinates;
            Animated.timing(this.state.bottom, {
                toValue: height,
                duration: 240,
            }).start();
        };
        this._keyboardWillHide = (props) => {
            Animated.timing(this.state.bottom, {
                toValue: 0,
                duration: 200,
            }).start();
        };
        this.onKeyPress = ({ nativeEvent }) => {
            if (nativeEvent.key === 'Enter') {
                const height = this.state.height;
                if (height <= 4 * 15 + 35) {
                    this.setState({ height: height + 15 });
                }
            }
            if (nativeEvent.key === 'Backspace') {
                if (!this.state.value)
                    return;
                const code = this.state.value.charCodeAt(this.state.value.length - 1);
                const height = this.state.height;
                if (height > 35 && code === 10) {
                    this.setState({ height: height - 15 });
                }
            }
        };
        this.onChangeText = (value) => {
            this.setState({ value });
        };
        this.onSend = () => {
            Keyboard.dismiss();
            if (this.props.onSend) {
                this.props.onSend(this.state.value);
            }
        };
        this.onBlur = () => {
        };
        this.state = {
            bottom: new Animated.Value(0),
            height: 35,
            canPost: false,
        };
    }
    componentWillMount() {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardWillShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardWillHide);
    }
    componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    }
    render() {
        return (<Animated.View style={[commonStyles.flexRow, styles.position, { bottom: this.state.bottom }, this.props.style]}>
                <View style={commonStyles.flex1}>
                    <TextInput placeholder={this.props.placeholder} multiline onKeyPress={this.onKeyPress} autoFocus={this.props.autoFocus} onBlur={this.onBlur} onChangeText={this.onChangeText} underlineColorAndroid='transparent' style={[styles.input, { height: this.state.height }]}/>
                </View>
                <TouchableOpacity disabled={!this.state.value} onPress={this.onSend}>
                    <MyText style={[styles.btn, this.state.value ? styles.btnActive : null]}>发表</MyText>
                </TouchableOpacity>
            </Animated.View>);
    }
}
MyInputToolBar.defaultProps = {
    placeholder: null,
    style: null,
    onSend: null,
    autoFocus: true
};
const styles = StyleSheet.create({
    position: {
        position: 'absolute',
        width: SCREEN_WIDTH,
        left: 0,
        bottom: 0,
        alignItems: 'center',
        backgroundColor: '#F5F4F4',
        padding: 10,
    },
    input: {
        width: '100%',
        backgroundColor: '#fff',
        padding: 5,
        fontSize: 15,
        borderWidth: 0.5,
        borderColor: '#E0E0E0',
        borderRadius: 5,
    },
    btn: {
        marginLeft: 10,
    },
    btnActive: {
        color: '#DAC228'
    }
});
export default MyInputToolBar;
